import React, {} from "react";
import { useState } from "react";
import './index.scss'
import { createPortal } from "react-dom";





function App() {

  const [isShow,setIsShow] = useState(false)

  // craetePortal 是创建一个弹出的传送内容
  // 参数1 是传送的内容，内容可以是一个完整的组件
  // 参数2 是传送到哪去
const portalHtml = isShow && createPortal(<div className="portal" onClick={() => setIsShow(false)}>
    <div>
        <h2>温馨提示 <span onClick={() => setIsShow(false)}>关闭</span> </h2>
        <section>今天是周五，明天可以躺平了，后天我也能躺平了，好开心啊。</section>
    </div>
  </div>, document.querySelector('#ma'))

  return (
    <div>
      <h1>App</h1>
      <div id="ma"></div>
      {portalHtml}
      <button onClick={()=>{
        setIsShow(true)
      }}>点击显示</button>

     
    </div>
  )
}

export default App;